import React from "react";
import { createForm, onFieldInit, onFormInit, FormPath } from "@formily/core";
import { FormProvider, Field } from "@formily/react";

import { Input } from "@/components/ui/input";

function App() {
  const form = React.useMemo(() => {
    return createForm({
      effects() {
        onFormInit(() => {
          console.log("Form inited");
        });
        onFieldInit("target", () => {
          console.log("target field inited");
        });
      },
      initialValues: {
        say: "hello",
        target: "target1",
      },
      values: {
        say: "hello world",
        target: "target",
      },
    });
  }, []);
  console.log(form);
  console.log(FormPath.parse("aa.*[1:2].bb").match("aa.1.bb"));

  return (
    <div>
      <FormProvider form={form}>
        <Field name="say" component={[Input, { placeholder: "say" }]} />
      </FormProvider>
      <button
        onClick={() => {
          form.createField({ name: "target" });
        }}
      >
        创建target
      </button>
    </div>
  );
}

export default App;
